import Fetch from './module/fetch';
import imglist from './view/imglist.html';
class getData {
    constructor() {
        this.render();
    }
    async render() {
        var options = {
            type: "get",
            url: "http://localhost:3000/imginfo"
        }
        var datas = await new Fetch().initEvent(options);
        console.log(datas.imgs);
        var htmlstr = template.render(imglist, { data: datas.imgs });
        var imgcontainer = document.getElementsByClassName("swiper-wrapper")[0];
        var thumbs = document.getElementsByClassName("swiper-thumbs")[0];
        //渲染
        imgcontainer.innerHTML = htmlstr;//轮播图
        thumbs.innerHTML = htmlstr;//缩略图

        this.initEvent();//执行轮播事件
    }
    initEvent() {
        var currentIndex = 0;
        var prev = document.getElementsByClassName("prev")[0];
        var next = document.getElementsByClassName("next")[0];
        //轮播图集合
        var bigUl = document.getElementsByClassName("swiper-wrapper")[0].children[0];
        console.log(bigUl);
        var smallUl = document.getElementsByClassName("swiper-thumbs")[0].children[0];
        var bigimgs = Array.from(document.getElementsByClassName("swiper-wrapper")[0].children[0].children);
        var smallimgs = Array.from(document.getElementsByClassName("swiper-thumbs")[0].children[0].children);
        // console.log(bigimgs);
        smallimgs[0].style.opacity = 1;
        //切换
        function tabImgsByBlock() {
            //方法一：设置block:none
            for (let i = 0; i < bigimgs.length; i++) {
                bigimgs[i].style.display = "none";
                smallimgs[i].style.opacity = 0.5;
            }
            bigimgs[currentIndex].style.display = "block";
            smallimgs[currentIndex].style.opacity = 1;
        }
        function tabImgsByCSS3() {
            //方法二：css3属性
            for (let i = 0; i < smallimgs.length; i++) {
                smallimgs[i].style.opacity = 0.4;
            }
            smallimgs[currentIndex].style.opacity = 1;
            bigUl.style.transform = `translateX(${-currentIndex * 409}px)`;
            smallUl.style.transform = `translateX(${-currentIndex * 100}px)`;
        }
        //点击缩略图切换
        smallimgs.forEach((li, index) => {
            li.addEventListener('click', function () {
                currentIndex = index;
                // tabImgsByBlock();
                tabImgsByCSS3();
            })
        });
        //点击前后的箭头切换
        prev.addEventListener('click', clickTabToPrev);
        next.addEventListener('click', clickTabToNext);
        function clickTabToPrev() {
            currentIndex = --currentIndex == -1 ? smallimgs.length - 1 : currentIndex;
            tabImgsByCSS3();
        }
        function clickTabToNext() {
            currentIndex = ++currentIndex == smallimgs.length ? 0 : currentIndex;
            tabImgsByCSS3();
        }
        //拖动切换
        var sw = document.getElementsByClassName("swiper-wrapper")[0];
        var start, end;
        sw.addEventListener('touchstart', touchFn);
        sw.addEventListener('touchend', touchFn);
        function touchFn(e) {
            e.preventDefault();
            var touch = e.changedTouches[0];
            switch (e.type) {
                case "touchstart":
                    start = touch.pageX;
                    break;
                case "touchend":
                    end = touch.pageX;
                    if (start - end > 0) {//往左滑动，向后切换
                        clickTabToNext();
                    } else {//往右滑动
                        clickTabToPrev();
                    }
                    break;
            }
        }
    }
}
new getData();
